// 内容的组件
<template>
    <div style="margin-top: 0px;">
        <!-- 头 -->
        <div class="header">
            <i v-if="!isCollapse" class="el-icon-s-fold" @click="setIsCollapse"></i>
            <i v-else class="el-icon-s-unfold" @click="setIsCollapse"></i>
            <div class="header-right">
                <div class="user">
                    欢迎{{username}} 
                    <i class="el-icon-switch-button" @click="loginOut">退出</i>
                </div>
            </div>
        </div>
        <!-- 路由出口 -->
        <div>
            <router-view/>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                username:''
            }
        },
        //调用父类的变量
        props:['isCollapse'],
        methods: {
            
            loginOut(){
                //退出的方法
                //清空本地存储
                localStorage.removeItem("user");
                //返回登录页面
                this.$router.push("/")
            },
            setIsCollapse(){
                // 修改父组件index的isCollapse属性
                this.$emit('setIsCollapse')
            },
        },
        //解析本地存储的数据给username属性赋值
        created() {
            this.username = JSON.parse(localStorage.getItem("user")).username
        },
    }
</script>
<style lang='less' scoped>
.header{
    height: 60px;
    background:#0c6785;
    .el-icon-s-fold,.el-icon-s-unfold{
        font-size: 35px;
        float: left;
        padding-top: 10px;
    }
    color: rgb(255, 255, 255);
    
}
.header-right{
    float: right;
    padding-right: 20px;
    padding-top: 20px;
    display: flex;
    .user{
        margin-left: 20px;
    }
}

</style>
